<template>
  <div style="height:90%;width:100%;">
    <div class="addCityEchart" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "addCity",
  props: {
    addCityEchart: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch:{
    addCityEchart(val){
     this.getPie(val);
    }
  },
  methods: {


    getPie(val) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".addCityEchart"));
      let option = {
          tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                },
              formatter: '{b} <br /> {a0}: {c0}'+ "%"+'<br />{a1}: {c1} '+ "%"
              },
        color:['#0070c0','#00b050'],
        legend: {
             data: ['2020年完成率','同比'],
             // bottom: '20px',
            },
        grid: {
          left: "60px",
          right: "20px",
          bottom:'30px',
         },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLabel: {
            interval:0,
            // rotate:40 ,
            },
          data:val.xAxis
          },
        yAxis: [
          {
              type: 'value',
              // min: (minData-(minData+maxData1)%2)*2.2,
              // // max: 100,
              // interval: 50,
              splitLine:{show: false},  //去除网格线
              axisLabel: {
                  formatter: '{value} %',
                  show:false
              },
              splitArea:{
                  show:true,
                  areaStyle:{
                      color:'#fff'
                  },
              },
              axisTick:{ //y轴刻度线
                  show:false
              },
              axisLine:{ //y轴
                  show:false
              },
          },
              {
                  type: 'value',
                  // min: 0,
                  splitLine:{show: false},  //去除网格线
                  // max: maxData*2,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value} %',
                      show:false
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              },

            ],

        series: [
          {
              type: "bar",
              name: '2020年完成率',
              data: val.yAxis,
              barWidth :20,

              itemStyle:{
              normal:{
                color: function(params) {
                     var c="";
                     var index =val.xAxis.indexOf("浙江");
                     if(params.dataIndex != index){
                       c='#0070c0'
                     }else{
                       c='#c00000'
                     }
                      return c;
                      },
                  label: {
                      show: true,
                      position: 'top',
                      textStyle: {
                         color: '#0070c0'
                       },
                        formatter:"{c}%",
                   }
              }
          },
            },
          {
            type: "line",
             name: '同比',
            smooth: true,
            yAxisIndex: 1,
            data: val.y1Axis,
            lineStyle: {
                   normal: {
                       color: "#00b050", // 线条颜色
                       width: 0.8
                   }
            },
            itemStyle : {
              normal: {
                label : {
                  show: true,
                  position: 'top',
                  textStyle: {
                     color: '#00b050'
                   },
                    formatter:"{c}%",
                  },
               },
            },
          },


      ],
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
